<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <title>离乌人员信息登记</title>
    <meta charset="utf-8">


    <link href="../static/weiui/lib/weui.css" th:href="@{/weiui/lib/weui.css}" rel="stylesheet">
    <link href="../static/weiui/css/jquery-weui.css" th:href="@{/weiui/css/jquery-weui.css}" rel="stylesheet">
    <link href="../static/weiui/css/demos.css" th:href="@{/weiui/css/demos.css}" rel="stylesheet">

    <th:block th:include="include :: header('新增离乌申请数据')"/>
    <th:block th:include="include :: datetimepicker-css"/>

    <style type="text/css">
        iframe{
            width: 100%;
            height: 100%;
        }

        .main-header {
            position: fixed;
            top: 0;
            height: 47px;
            width: 50px;
            background: transparent;
            z-index: 20001;
        }

        .weui-picker-modal {
            width: 100%;
            position: absolute;
            bottom: 0;
            text-align: center;
            border-radius: 0;
            opacity: 0.6;
            height: 15rem;
        }
        .weui-picker-modal .picker-items {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            width: 100%;
            padding: 0;
            text-align: right;
            font-size: 2rem;
        }
        .city-picker .picker-items-col {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            max-width: 10rem;
        }
        .toolbar .title {
            position: absolute;
            display: block;
            width: 100%;
            padding: 0;
            font-size: 1.85rem;
            font-weight: normal;
            line-height: 0rem;
            color: #3d4145;
            text-align: center;
            white-space: nowrap;
        }
        .toolbar {
            position: relative;
            width: 100%;
            font-size: 1.85rem;
            line-height: 8.5;
            color: #3d4145;
            background: #f7f7f8;
        }
        .toolbar .toolbar-inner {
            height: 3.2rem;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            text-align: center;
        }
        .toolbar .picker-button {
            position: absolute;
            right: 0;
            box-sizing: border-box;
            height: 2.2rem;
            line-height: 3.2rem;
            color: #04BE02;
            z-index: 1;
            padding: 0 .5rem;
        }
    </style>
</head>

<body ontouchstart>

<div class="weui-tab">
    <div class="weui-tab__bd">
        <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
            <div class="wrapper wrapper-content animated fadeInRight ibox-content">
                <form class="form-horizontal m" id="form-lwsq-edit" style="padding-bottom: 35px"
                      th:object="${applicationInfo}">

                    <div class="form-group" style="text-align: center;font-size: 20px;font-weight: bold">
                        <span class="col-sm-12 ">离乌人员个人信息</span>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">姓名：</label>
                        <div class="col-sm-8">
                            <input id="xm" name="xm" minlength="2" th:field="*{xm}" class="form-control" type="text"
                                   required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">性别：</label>
                        <div class="col-sm-8">
                            <select name="xb" class="form-control" th:with="type=${@dict.getType('sys_user_sex')}"
                                    required>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                        th:value="${dict.dictValue}" th:field="*{xb}"></option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label ">年龄：</label>
                        <div class="col-sm-8">
                            <input name="by3" class="form-control" placeholder="请输入年龄" type="number"
                                   th:field="*{by3}" >
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">民族：</label>
                        <div class="col-sm-8">
                            <select name="mz" class="form-control" th:with="type=${@dict.getType('b_ry_mz')}" required>
                                <option value=""></option>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                        th:value="${dict.dictValue}" th:field="*{mz}"></option>
                            </select>
                        </div>
                    </div>


                    <div class="form-group">
                        <label class="col-sm-3 control-label">证件类型：</label>
                        <div class="col-sm-8">
                            <select name="zjlx" id="zjlx" class="form-control" style="color: blue"
                                    th:with="type=${@dict.getType('b_zjlx')}" required>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                        th:value="${dict.dictValue}" th:field="*{zjlx}"></option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">证件号码：</label>
                        <div class="col-sm-8">
                            <input name="zjhm" th:field="*{zjhm}" class="form-control" placeholder="请输入您的证件号码(用于身份核验)"
                                   type="text" required>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">手机号码：</label>
                        <div class="col-sm-8">
                            <input name="sjhm" th:field="*{sjhm}" class="form-control" type="number" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label  is-required" for="start">离乌目的地（点击选择）：</label>
                        <div class="col-sm-8">
                            <input  class="form-control" name="fcmdd" id="start" type="text" value="上海 上海市" th:value="*{fcmdd}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">计划离乌时间：</label>
                        <div class="col-sm-8">
                            <div class="input-group date">
                                <input name="yqlwrq" th:value="${#dates.format(applicationInfo.yqlwrq, 'yyyy-MM-dd')}"
                                       class="form-control" placeholder="yyyy-MM-dd" type="date" required>
                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">计划离乌方式：</label>
                        <div class="col-sm-8">
                            <select name="lwfs" class="form-control "
                                    th:with="type=${@dict.getType('b_jtfs')}" required>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                        th:value="${dict.dictValue}" th:field="*{lwfs}"></option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">离乌事由：</label>
                        <div class="col-sm-8">
                            <select id="lwsy"  class="form-control"  th:with="type=${@dict.getType('b_lwsy')}" required>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                        th:value="${dict.dictValue}"  th:if="${dict.dictLabel}==${applicationInfo.by2} ? 'selected' : '' " selected></option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">入乌日期：</label>
                        <div class="col-sm-8">
                            <div class="input-group date">
                                <input name="rwrq" th:value="${#dates.format(applicationInfo.rwrq, 'yyyy-MM-dd')}"
                                       class="form-control" placeholder="yyyy-MM-dd" type="text" required>
                                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">在乌居住（滞留）所类型：</label>
                        <div class="col-sm-8">
                            <select onchange="isshowFJH()" id="zzslx" name="zzslx" class="form-control "
                                    th:with="type=${@dict.getType('b_zzslx')}" required>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                        th:value="${dict.dictValue}" th:field="*{zzslx}"></option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required" id="fjh">入住房间号/楼栋/单元/房号：</label>
                        <div class="col-sm-8">
                            <input name="by1" class="form-control" placeholder="房间号" type="text" th:field="*{by1}">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">在乌居住（滞留）详细地址/隔离点：</label>
                        <div class="col-sm-8">
                            <textarea name="xxdz" class="form-control" placeholder="如宾馆/酒店名称/住所所在道路、门牌号、小区、楼栋号、单元室等"
                                      th:field="*{xxdz}" required></textarea>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">在乌居住(滞留)地所属社区：</label>
                        <label class="col-sm-8 control-label " id="sqNameLabel" th:text="*{sqName}"></label>
                    </div>

                    <div id="element1" class="row">
                        <div class="col-sm-2">
                            <select id="quyu" class="quyu form-control m-b" data-first-title="选择区域">
                                <option value="" th:field="*{sqName}">请选择</option>
                                <option value="天山区" selected>天山区</option>
                            </select>
                        </div>
                        <div class="col-sm-2">
                            <select id="jiedao" class="jiedao form-control m-b" data-first-title="选择街道">
                                <option value="">请选择</option>
                                <option value="燕儿窝街道" selected>燕儿窝街道</option>
                            </select>
                        </div>
                        <div class="col-sm-2">
                            <select id="shequ" class="shequ form-control m-b" data-first-title="选择社区">
                                <option value="红雁池社区" selected>红雁池社区</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">是否有7日内核酸检测报告（阴性）：</label>
                        <div class="col-sm-8">
                            <select name="hsjc" class="form-control m-b" th:with="type=${@dict.getType('sys_yes_no')}" required>
                                <option value=""></option>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:field="*{hsjc}"></option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label is-required">近3天是否有发热、咳嗽等症状：</label>
                        <div class="col-sm-8">
                            <select name="styc" class="form-control " th:with="type=${@dict.getType('sys_yes_no')}"
                                    required>
                                <option th:each="dict : ${type}" th:text="${dict.dictLabel}"
                                        th:value="${dict.dictValue}" th:field="*{styc}"></option>
                            </select>
                        </div>
                    </div>



                    <input name="by9" id="by9" type="hidden"/>
                    <input name="sqName" id="sqName" type="hidden" th:field="*{sqName}"/>
                    <input name="sqCode" id="sqCode" type="hidden" th:field="*{sqCode}"/>
                    <input name="id" id="id" type="hidden" th:field="*{id}"/>
                    <input name="spzt" id="spzt" type="hidden" th:field="*{spzt}"/>


                    <div class="form-group">
                        <div class="col-sm-8">
                            <div class="input-group date">
                                <input name="ck" id="ck" type="checkbox" checked>本人承诺:以上所填写内容真实,完整,
                                如有虚假,由本人承担一切责任!
                            </div>
                        </div>
                    </div>

                    <div class="form-group" style="color: green;text-align: center;font-size: 16px">
                        <label th:if=" ${applicationInfo.spzt} eq 'SHTG' " class="col-sm-12 control-label">审批通过</label>
                    </div>

                    <div class="form-group" style="color: green;text-align: center;font-size: 16px">
                        <label th:if=" ${applicationInfo.spzt} eq 'SQLW' " class="col-sm-12 control-label">已申请离乌</label>
                    </div>

                    <div class="col-md-12">
                        <div class="form-group">
                            <div class="col-sm-12 " style="text-align: center;">

                                <button th:if=" ${applicationInfo.spzt} ne 'SHTG' and  ${applicationInfo.spzt} ne 'SQLW'  "
                                        id="bottonsubmit" type="button" onclick="submitHandler()"
                                        class="btn btn-primary">提交
                                </button>
                                <button class="btn btn-danger" onclick="javascript:history.go(-1)" type="button">关闭
                                </button>
                            </div>
                        </div>
                    </div>

                </form>
            </div>
        </div>


        <div id="tab4" class="weui-tab__bd-item ">

            <div class="wrapper wrapper-content animated fadeInRight ibox-content">
                <form class="form-horizontal m" id="form-lwsq-chaxun" style="padding-bottom: 35px"
                      th:object="${applicationInfo}"
                      action="/api/lwsq/lwsq/getByCardId" method="post" >
                    <div class="form-group"
                         style="text-align: center;font-size: 16px;font-weight: bold ;margin: 30px 0px 50px 0px">
                        <span class="col-sm-12 ">个人离乌二维码</span>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-3 control-label">审核状态：</label>
                        <label class="col-sm-8 control-label"
                               th:text="${@dict.getLabel('b_spzt', applicationInfo.spzt)}"></label>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">审核意见：</label>
                        <label class="col-sm-8 control-label"  th:text="*{shyj}"></label>
                    </div>
                    <hr/>
                    <div class="col-md-12" style="text-align: -webkit-center;">
                        <div class="form-group">
                            <div class="col-sm-12" style="    text-align: center;">
                                <span id="findresult" style="font-weight: bold;font-size: 14px;color: red">无法生成个人离乌二维码，审核通过后，才可生成离乌二维码</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <div class="form-group">
                            <div class="col-sm-12">
                                <dev id="qcode"></dev>
                            </div>
                        </div>
                    </div>


                </form>
            </div>
        </div>
    </div>

    <div class="weui-tabbar">
        <a href="#tab1" class="weui-tabbar__item weui-bar__item--on">
            <div class="weui-tabbar__icon">
                <img src="/weiui/images/icon_nav_msg.png" alt="">
            </div>
            <p class="weui-tabbar__label">修改</p>
        </a>

        <a href="#tab4" class="weui-tabbar__item">
            <div class="weui-tabbar__icon">
                <img src="/weiui/images/icon_nav_cell.png" alt="">
            </div>
            <p class="weui-tabbar__label">离乌二维码</p>
        </a>
    </div>
</div>
<script src="../static/js/xj.city.js" th:src="@{/js/xj.city.js}"></script>
<script src="../static/weiui/lib/jquery-2.1.4.js" th:src="@{/weiui/lib/jquery-2.1.4.js}"></script>
<script src="../static/weiui/lib/fastclick.js" th:src="@{/weiui/lib/fastclick.js}"></script>
<script src="../static/weiui/js/jquery-weui.js" th:src="@{/weiui/js/jquery-weui.js}"></script>
<script src="../static/js/qrcode.min.js" th:src="@{/js/qrcode.min.js}"></script>

<script src="../static/weiui/js/city-picker.js?v=1" th:src="@{/weiui/js/city-picker.js?v=123}"></script>
<script>
    $("#start").cityPicker({
        title: "选择离乌目的地",
        showDistrict: false
    });

</script>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: jquery-cxselect-js"/>

<script th:inline="javascript">
    var prefix = ctx + "api/lwsq/lwsq";

    $("#form-lwsq-edit").validate({
        rules: {
            focusCleanup: true,
            by2: {
                required: true,
            },
            by3: {
                required: true,
                max: 200,
                min: 1
            },
            sjhm: {
                isPhone: true
            },
            zjhm: {
                required: true,
                isIdentity: true
            },
            yqlwrq: {
                required: true,
            }
        },

    });


    var data = init_xj_city_picker;
    var qrcode = new QRCode(document.getElementById("qcode"), {
        width: 201,
        height: 201
    })

    var spzt = $("#spzt").val();
    if (spzt == 'SHTG') {
        $("#findresult").html('审核通过，个人二维码如下');
        var id = $("#id").val();
        qrcode.makeCode(id.replace("invitation", "main"))
    }

    $(function () {
        $(".fa-calendar").closest('.input-group-addon').click(function () {
            $(this).prev().datetimepicker('show');
        })
        //证件类型
        $("#zjlx").change(function () {
            $.validate.reset();
            var type = $("#zjlx").find("option:selected").val();
            if ("sfz" == type) {
                $("#zjhm").rules("remove");
                $("#zjhm").rules("add", {required: true, isIdentity: true, messages: {required: "请正确输入您的身份证号码"}});
            } else {
                $("input[name=zjhm]").rules("remove");
                $("#zjhm").rules("add", {required: true, messages: {required: "必填项，不能跳过"}});
                $("#zjhm").attr("placeholder","请填写证件号码");
            }
        });

    });

    function submitHandler() {
        if ($("#sqCode").val() == "" || $("#sqCode").val() == null) {
            $.modal.alertWarning("请选择所属社区！便于社区人员联系")
            return
        } else {
            if ($("#shequ").find("option:selected").val() != undefined) {
                $("#sqName").val($("#shequ").find("option:selected").text())
                $("#sqCode").val($("#shequ").find("option:selected").val())
            }

            if ($.validate.form()) {
                $.operate.post(prefix + "/edit", $('#form-lwsq-edit').serialize());
            }
            return;
        }
    }

    function isshowFJH() {
        if ($("#zzslx").val() == "jd" || $("#zzslx").val() == "xx") {
            $("#fjh").html('入住房间号')
            //$("#fjh").css("display", "");
        } else {
            $("#fjh").html('楼栋/单元/房号')
            //$("#fjh").css("display", "none");
        }
    }

    $("input[name='rwrq']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $("input[name='yqlwrq']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });



    //修改页面 入乌日期小于今日日期
    $("input[name='rwrq']").change(function () {
        var thetime = $(this).val();
        var d = new Date(Date.parse(thetime.replace(/-/g, "/")));
        var curDate = new Date();
        if (d > curDate) {
            $.modal.alertWarning("请选择正确的日期！！")
            $(this).val("");
            $(this).focus();
        }
    });


    //离乌申请页面 离乌日期不可小于今日日期
    $("input[name='yqlwrq']").change(function () {
        var thetime = $(this).val();
        var d = new Date(Date.parse(thetime.replace(/-/g, "/")));
        var curDate = new Date();
        if (d < curDate) {
            $.modal.alertWarning("请选择正确的日期！！")
            $(this).val("");
            $(this).focus();
        }
    });

    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#by4',
            type: 'datetime',
            trigger: 'click'
        });
    });


    $('#element1').cxSelect({
        selects: ['quyu', 'jiedao', 'shequ'],
        jsonName: 'name',
        jsonValue: 'code',
        jsonSub: 'children',
        data: data
    });

</script>
</body>
</html>
